<template>
  <div class="page-gird-container">
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" label-width="83" :label-colon="true">
      <FormItem label="原密码" prop="originalPsw">
        <Input v-model="formValidate.originalPsw" style="width: 200px"></Input>
      </FormItem>
      <FormItem label="新密码" prop="newPsw">
        <Input v-model="formValidate.newPsw" style="width: 200px"></Input>
      </FormItem>
      <FormItem label="确认密码" prop="confirmPsw">
        <Input v-model="formValidate.confirmPsw" style="width: 200px"></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="submit">保存修改</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
    import { memberUpdatePassword } from '@/api/set'

    export default {
        name: "set-passwordRevise",
        data() {
            return {
                formValidate: {
                    originalPsw: "",
                    newPsw: "",
                    confirmPsw: "",
                },
                ruleValidate: {
                    originalPsw: [
                        { required: true, message: '请输入原密码', trigger: 'blur' }
                    ],
                    newPsw: [
                        { required: true, message: '请输入新密码', trigger: 'blur' }
                    ],
                    confirmPsw: [
                        { required: true, message: '请确认密码', trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            submit() {
                this.$refs['formValidate'].validate((valid) => {
                    if (valid) {
                        memberUpdatePassword({
                            password: this.formValidate.originalPsw,
                            newPassword: this.formValidate.newPsw,
                            newPassword_confirm: this.formValidate.confirmPsw,
                        }).then(() => {
                            this.$Message.success('修改成功!');
                            this.formValidate = {
                                originalPsw: "",
                                newPsw: "",
                                confirmPsw: "",
                            }
                        })
                    }
                })
            }
        }
    };
</script>

<style lang="less" scoped>
.page-gird-container {
  display: flex;
  flex-direction: column;
  box-shadow: rgba(10, 32, 51, 0.12) 0px 1px 3px 0px;
  padding: 24px;
  background-color: #fff;
}
</style>
